<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="http://www.kuibutech.com/wechatAuth/css/weui.css">
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <title>燃烧,照亮他人</title>
</head>

<style type="text/css">
    .btn {
        border: solid 1px #04BE02;
        border-radius: 5px;
        font-size: 15px;
        background-color: #ffffff;
        color: #04BE02;
        text-align: center;
        line-height: 2.333;
        width: 22%;
        margin-left: 5px;
    }

    .btn-small {
        border: solid 1px #04BE02;
        border-radius: 5px;
        font-size: 15px;
        background-color: #ffffff;
        color: #04BE02;
        text-align: center;
        line-height: 2.333;
        width: 16%;
        margin-left: 5px;
    }

    .btn-chose {
        border: solid 1px #04BE02;
        border-radius: 5px;
        font-size: 15px;
        background-color: #04BE02;
        color: #ffffff;
        text-align: center;
        line-height: 2.333;
        width: 22%;
        margin-left: 5px;
    }

    .btn-chose-small {
        border: solid 1px #04BE02;
        border-radius: 5px;
        font-size: 15px;
        background-color: #04BE02;
        color: #ffffff;
        text-align: center;
        line-height: 2.333;
        width: 16%;
        margin-left: 5px;
    }

    .submit {
        margin-top: 10px;
        width: 96%;
        margin-left: 2%;
        margin-bottom: 80px;
        z-index: -1;
    }

    .weui_cells {
        margin-left: 5%;
    }

</style>


<script type="text/javascript">

    var upload_img_count = 1;
    $(document).ready(function () {
        var link = "http://www.kuibutech.com/wechatAuth/route/gotoCard";

        $.post("http://www.kuibutech.com/wechatAuth/wechat/getSignature", {url: link}, function (data, status) {
            wx.config({
                debug: false,
                appId: 'wx651efc7e955f2b3c',
                timestamp: data.timeStamp,
                nonceStr: 'haoransun',
                signature: data.signature,
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone',
                    'chooseImage',
                    'previewImage',
                    'uploadImage'
                ]
            });
            wx.ready(function () {
                var images = {localId: [], serverId: []};
                document.querySelector('#image_file').onclick = function () {
                    // 拍照或从手机相册中选图接口
                    wx.chooseImage({
                        count: 1, // 默认9
                        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                            images.localId[0] = localIds[0];


                            wx.uploadImage({
                                localId: images.localId[0].toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                                isShowProgressTips: 1, // 默认为1，显示进度提示
                                success: function (res) {
                                    var serverId = res.serverId; // 返回图片的服务器端ID
                                    images.serverId[0] = serverId;

                                    $.post("/wechatAuth/upload/uploadImg", {
                                        serverId: images.serverId[0].toString(),
                                        access_token: data.accessToken
                                    }, function (data, status) {
                                        if (data.result == true) {

                                            var child = "<li class=\"weui_uploader_file\"><img src=\"" + data.imgSrc + "\" width=\"79px\" height=\"79px\" style=\"border: none\"></li>";
                                            $("#picView").append(child);
                                            $("#uploadSrc_" + upload_img_count).val(data.imgSrc);
                                            if (upload_img_count >= 3) {
                                                // 上传图片数量达到上限
                                                $('#addPic').hide();
                                            }
                                            upload_img_count++; // 增加图片数量
                                        } else {
                                            alert("error occurred." + data)
                                        }
                                    });
                                }
                            });

                        }
                    });


                }
            });
        });


    });


</script>


<script type="text/javascript">
    function change_day(day) {
        if (day == 0) {
            $('#day0').removeClass().addClass('btn-chose');
            $('#day1').removeClass().addClass('btn');
            $('#day2').removeClass().addClass('btn');
            $('#day').val(0);
        }

        if (day == -1) {
            $('#day1').removeClass().addClass('btn-chose');
            $('#day0').removeClass().addClass('btn');
            $('#day2').removeClass().addClass('btn');
            $('#day').val(-1);
        }

        if (day == -2) {
            $('#day2').removeClass().addClass('btn-chose');
            $('#day0').removeClass().addClass('btn');
            $('#day1').removeClass().addClass('btn');
            $('#day').val(-2);
        }
    }


    // 选择运动类型
    function change_way(way) {
        // 跑步
        if (way == 0) {
            $('#way0').removeClass().addClass('btn-chose-small');
            $('#way1').removeClass().addClass('btn-small');
            $('#way2').removeClass().addClass('btn-small');
            $('#way3').removeClass().addClass('btn-small');
            $('#way4').removeClass().addClass('btn-small');
            $('#way').text(0);
            $('#step').slideUp();
            $('#time').slideUp();
            $('#mile').slideDown();
        }

        // 走路
        if (way == 1) {
            $('#way1').removeClass().addClass('btn-chose-small');
            $('#way0').removeClass().addClass('btn-small');
            $('#way2').removeClass().addClass('btn-small');
            $('#way3').removeClass().addClass('btn-small');
            $('#way4').removeClass().addClass('btn-small');
            $('#way').val(1);
            $('#mile').slideUp();
            $('#time').slideUp();
            $('#step').slideDown();
        }

        // 骑行
        if (way == 2) {
            $('#way2').removeClass().addClass('btn-chose-small');
            $('#way0').removeClass().addClass('btn-small');
            $('#way1').removeClass().addClass('btn-small');
            $('#way3').removeClass().addClass('btn-small');
            $('#way4').removeClass().addClass('btn-small');
            $('#way').val(2);
            $('#time').slideUp();
            $('#step').slideUp();
            $('#mile').slideDown();
        }

        // 健身
        if (way == 3) {
            $('#way2').removeClass().addClass('btn-small');
            $('#way0').removeClass().addClass('btn-small');
            $('#way1').removeClass().addClass('btn-small');
            $('#way3').removeClass().addClass('btn-chose-small');
            $('#way4').removeClass().addClass('btn-small');
            $('#way').val(3);
            $('#mile').slideUp();
            $('#step').slideUp();
            $('#time').slideDown();
        }

        // 其他
        if (way == 4) {
            $('#way2').removeClass().addClass('btn-small');
            $('#way0').removeClass().addClass('btn-small');
            $('#way1').removeClass().addClass('btn-small');
            $('#way3').removeClass().addClass('btn-small');
            $('#way4').removeClass().addClass('btn-chose-small');
            $('#way').val(4);
            $('#mile').slideUp();
            $('#step').slideUp();
            $('#time').slideDown();
        }
    }

    function check_submit() {
        var mile = $('#mileValue').val();
        var step = $('#stepValue').val();
        var time = $('#timeValue').val();
        var way = $('#way').val();

        if (way == 0 || way == 2) {
            if (mile == '') {
                $('#mileLabel').css('color', 'red');
                $('#complete').hide();
                return false;
            } else {
                return true;
            }
        } else if (way == 1) {
            if (step == '') {
                $('#stepLabel').css('color', 'red');
                $('#complete').hide();
                return false;
            } else {
                return true;
            }
        } else {
            if (time == '') {
                $('#timeLabel').css('color', 'red');
                $('#complete').hide();
                return false;
            } else {
                return true;
            }
        }
    }

    function submit_form() {
        $('#complete').show();
        setTimeout(function () {
            $('#form1').submit();
        }, 650);
    }

</script>

<body>

<form id="form1" action="/wechatAuth/launchcard/submit/" method="post" onsubmit="return check_submit()">

    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <div class="weui_uploader">
                <div class="weui_uploader_bd">
                        <textarea class="weui_textarea" name="slogan" placeholder="个性签名"
                                  rows="3">${user_info.slogan}</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="weui_cells_title" style="color: black">上传图片</div>
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <div class="weui_uploader">
                <div class="weui_uploader_bd" id="weui_uploader_bd">
                    <input id="uploadSrc_1" hidden name="uploadSrc_1" value="">
                    <input id="uploadSrc_2" hidden name="uploadSrc_2" value="">
                    <input id="uploadSrc_3" hidden name="uploadSrc_3" value="">

                    <ul id="picView" class="weui_uploader_files">

                    </ul>
                    <div id="addPic" class="weui_uploader_input_wrp">
                        <span id="image_file" name="pic" class="weui_uploader_input" type="file"
                              accept="*/*" onchange="fileSelected()"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="weui_cells_title" style="color: black">选择日期</div>
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <div class="weui_uploader">
                <div class="weui_uploader_bd">
                    <input type="button" id="day0" class="btn btn-chose" onclick="change_day(0)" value="今天"/>
                    <input type="button" id="day1" class="btn" onclick="change_day(-1)" value="昨天"/>
                    <input type="button" id="day2" class="btn" onclick="change_day(-2)" value="前天"/>
                    <input id="day" name="day" hidden value="0"/>
                </div>
            </div>
        </div>
    </div>

    <div class="weui_cells_title" style="color: black">运动方式</div>
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <div class="weui_uploader">
                <div class="weui_uploader_bd">
                    <input type="button" id="way0" class="btn-small btn-chose-small" onclick="change_way(0)"
                           value="跑步"/>
                    <input type="button" id="way2" class="btn-small" onclick="change_way(2)" value="骑行"/>
                    <input type="button" id="way1" class="btn-small" onclick="change_way(1)" value="走路"/>
                    <input type="button" id="way3" class="btn-small" onclick="change_way(3)" value="健身"/>
                    <input type="button" id="way4" class="btn-small" onclick="change_way(4)" value="其他"/>

                    <input id="way" name="way" hidden value="0"/>
                </div>
            </div>
        </div>
    </div>


    <div>
        <div id="mile" class="weui_cell">
            <div class="weui_cess_hd">
                <label id="mileLabel" class="weui_label">输入里程</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input id="mileValue" name="mile" class="weui_input" placeholder="单位 :公里">
            </div>
        </div>

        <div id="step" class="weui_cell" style="display: none">
            <div class="weui_cess_hd">
                <label id="stepLabel" class="weui_label">输入步数</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input id="stepValue" name="step" class="weui_input" type="number" pattern="[0-9]*"
                       placeholder="单位 :步数">
            </div>
        </div>

        <div id="time" class="weui_cell" style="display: none">
            <div class="weui_cess_hd">
                <label id="timeLabel" class="weui_label">运动时长</label>
            </div>

            <div class="weui_cell_bd weui_cell_primary">
                <input id="timeValue" name="time" class="weui_input" placeholder="单位 :小时">
            </div>
        </div>
    </div>


    <div class="weui_cells_title" style="margin-top: 20px">天气决定你的心情，还是心情决定你人生的天气？</div>
    <div class="weui_cell weui_cell_select weui_select_after">
        <div class="weui_cell_hd">
            <label class="weui_label" style="color: black">选择天气</label>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <select class="weui_select" name="weather">
                <option value="晴" selected>晴</option>
                <option value="阴">阴</option>
                <option value="雨">雨</option>
                <option value="风">风</option>
                <option value="雪">雪</option>
                <option value="热">热</option>
                <option value="冷">冷</option>
                <option value="酸">酸</option>
                <option value="甜">甜</option>
                <option value="苦">苦</option>
                <option value="辣">辣</option>
            </select>
        </div>
    </div>

    <div class="weui_cells_title" style="margin-top: 40px;color: black">此刻心情</div>
    <div class="weui_cells">
        <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
                <div class="weui_uploader">
                    <div class="weui_uploader_bd">
                        <textarea class="weui_textarea" name="text" rows="3">坚持是一件很难的事，坚持也是一件很简单的事！</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="submit">
        <input type="submit" onclick="submit_form()" class="weui_btn weui_btn_primary" value="提交"/>
    </div>

</form>


<div id="complete" class="weui_toast" hidden style="width: 45%;left: 43%;height: 142px">
    <div class="weui_toast" style="width: 45%;left: 43%">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content">打卡成功<br/>百尺竿头,更进一步!</p>
        <p class="weui_toast_content"></p>
    </div>
</div>


<div class="weui_tabbar" style="position: fixed;margin-bottom: 0px;z-index: 100">
    <a class="weui_tabbar_item" href="/wechatAuth/route/gotoCard">
        <div class="weui_tabbar_icon">
            <img src="http://www.kuibutech.com/wechatAuth/img/icon_nav_article.png">
        </div>
        <p class="weui_tabbar_label">打卡</p>
    </a>

    <a class="weui_tabbar_item" href="/wechatAuth/route/gotoMain">
        <div class="weui_tabbar_icon">
            <img src="http://www.kuibutech.com/wechatAuth/img/icon_nav_cell.png">
        </div>
        <p class="weui_tabbar_label">我的</p>
    </a>

    <a class="weui_tabbar_item" href="/wechatAuth/route/gotoMessage">
        <div class="weui_tabbar_icon">
            <img src="http://www.kuibutech.com/wechatAuth/img/icon_nav_dialog.png">
        </div>
        <p class="weui_tabbar_label">通知</p>
    </a>

</div>


<!-- jQuery文件 -->
<script src="http://www.kuibutech.com/wechatAuth/js/upload_pic.js"></script>
</body>
</html>